<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Axios 发送Http请求</title>
    <!--<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.0-beta.7/vue.global.js"></script>-->
    <script type="text/javascript" src="../../js/vue.global.js"></script>

    <script src="https://unpkg.com/axios@1.1.2/dist/axios.min.js"></script>
    <script src="../../js/axios.js"></script>

</head>
<body style="margin: 50px">

<a href="https://github.com/axios/axios" target="_blank">Axios 官网</a>
<br/><br/><br/>

<!--vue 应用实例挂载到此ID上，这样它及其下面的标签才能使用 vue 语法获取数据-->
<div id="rootApp">
    <button style="font-size: 20px;color: blue">初始化Get加载数据</button>
    <table border="1" style="width: 80%">
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>部门序号</th>
        </tr>
        <tr v-for="(person, index) in persons1" v-bind:key="'persons_' + (index)">
            <td>{{index +1}}</td>
            <td>{{person.name}}</td>
            <td>{{person.age}}</td>
            <td>{{person.deptNo}}</td>
        </tr>
    </table>
    <br/>
    <button style="font-size: 20px;color: blue" v-on:click="post1()">POST请求1</button>
    <table border="1" style="width: 80%">
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>部门序号</th>
        </tr>
        <tr v-for="(person, index) in persons2" v-bind:key="'persons_' + (index)">
            <td>{{index +1}}</td>
            <td>{{person.name}}</td>
            <td>{{person.age}}</td>
            <td>{{person.deptNo}}</td>
        </tr>
    </table>
    <br/>

    <button style="font-size: 20px;color: blue" v-on:click="post2()">POST请求2</button>
    <table border="1" style="width: 80%">
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>部门序号</th>
        </tr>
        <tr v-for="(person, index) in persons3" v-bind:key="'persons_' + (index)">
            <td>{{index +1}}</td>
            <td>{{person.name}}</td>
            <td>{{person.age}}</td>
            <td>{{person.deptNo}}</td>
        </tr>
    </table>
    <br/>
</div>

</body>

<script type="text/javascript">
    // 1、每个 Vue 应用都是通过用 createApp 函数创建一个新的应用实例开始, 用来在应用中注册"全局"组件
    // 2、传递给 createApp 的选项用于配置根组件
    // 3、应用实例暴露的大多数方法都会返回该同一实例，方便链式编程
    const App = Vue.createApp({
        //组件选项
        // data 定义数据, html 中可以进行获取
        data() {
            return {
                persons1: [],
                persons2: [],
                persons3: [],
                post1, // 自定义的事件函数同样需要进行返回
                post2 // 自定义的事件函数同样需要进行返回
            };

            // post 加载数据1
            function post1() {
                // Axios 内部不能直接使用 this，在 axios 回调函数中 this 指的是窗口，不是 Vue 实例，此时将它转为局部变量后再使用。
                let _this = this;

                // post 请求时第二个参数就是请求体的正文参数，可以是json对象或者json数组等等。
                axios.post('/vue/loadPersons?deptNo=20&version=125522100021', [
                    {"name": "张三", "age": "15"}, {"name": "李四", "age": "17"}, {"name": "王五", "age": "16"}
                ]).then(function (response) {
                    // 请求成功时进入
                    // 返回值一共有以下几个属性：data、status、statusText、headers、config、request
                    _this.persons2 = response.data.data;
                    console.log(response);
                }).catch(function (error) {
                    // 请求失败时进入
                    alert(error);
                }).finally(function () {
                    // 无论成功失败都进入
                    console.log('请求完成!');
                });
            }

            // post 加载数据2
            function post2() {
                // Axios 内部不能直接使用 this，在 axios 回调函数中 this 指的是窗口，不是 Vue 实例，此时将它转为局部变量后再使用。
                let _this = this;

                // post 请求时第二个参数就是请求体的正文参数，可以是json对象或者json数组等等。
                axios({
                    url: '/vue/loadPersons?deptNo=30&version=135522100021',
                    method: 'post',
                    data: [{"name": "张三", "age": "15"}, {"name": "李四", "age": "17"}, {"name": "王五", "age": "16"}],

                }).then(function (response) {
                    // 请求成功时进入
                    // 返回值一共有以下几个属性：data、status、statusText、headers、config、request
                    _this.persons3 = response.data.data;
                    console.log(response);
                }).catch(function (error) {
                    // 请求失败时进入
                    alert(error);
                }).finally(function () {
                    // 无论成功失败都进入
                    console.log('请求完成!');
                });
            }
        },
        // 当这个钩子被调用时，以下内容已经设置完成：响应式数据、计算属性、方法和侦听器。
        // 然而，此时挂载阶段还未开始，因此 $el 属性仍不可用。
        // 通常用于发送 ajax 请求后台数据，然后给 data 赋值，实现数据的异步加载，数据的初始化。
        created() {
            // Axios 内部不能直接使用 this，在 axios 回调函数中 this 指的是窗口，不是 Vue 实例，此时将它转为局部变量后再使用。
            let _this = this;

            // 初始化加载数据
            // get 请求时的参数既可以放在?后面，也可以放在 params 中.
            axios.get('/vue/loadPersons?deptNo=10', {
                params: {
                    version: "1451212451221"
                }
            }).then(function (response) {
                // 请求成功时进入
                _this.persons1 = response.data.data;
                console.log(response);
            }).catch(function (error) {
                // 请求失败时进入
                alert(error);
            }).finally(function () {
                // 无论成功失败都进入
                console.log('请求完成!');
            });
        }

    });

    // 4、一个应用需要被挂载(mount)到一个 DOM 元素中，当挂载(mount)应用时，该组件被用作渲染的起点
    // 5、与大多数应用方法不同的是 mount 不返回应用本身，而是返回的根组件实例(vm)
    const rootViewModel = App.mount("#rootApp");

</script>

</html>